<template>
	<div id="home">
		<header>
			<b>可米彩票</b>
			<span>
				<i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
				<i class="fa fa-sign-out"
				 aria-hidden="true"
				 @click='SignOut'
				></i>
			</span>
		</header>
		<ul class="nav">
			<li  style="color: #229BDA;">
				<i class="fa fa-money" aria-hidden="true"></i>
				<span>领红包</span>
			</li>
			<li style="color: #FCA53F;">
				<i class="fa fa-trophy" aria-hidden="true"></i>
				<span>开奖</span>
			</li>
			<li style="color: #E93851;">
				<i class="fa fa-download" aria-hidden="true"></i>
				<span>下载</span>
			</li>
			<li style="color: #69C92E;">
				<i class="fa fa-user-secret" aria-hidden="true"></i>
				<span>资讯</span>
			</li>
		</ul>
		<ul class="hall">
			<li v-for='(item,key) in allGames' :key='key'>
				<img :src="'http://192.168.2.245:3000'+item.icon2"/>
				<span>{{item.cn}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	methods:{
		SignOut(){
			var action = ()=>{
				localStorage.clear();
				this.$router.push({name:'Signin'});
			}
			this.operatorConfirm(action,'退出');
		}
	},
	computed:{
		allGames(){
			return this.$store.getters.allGames
		}
	},
	mounted(){
		this.$store.dispatch('loadAllPermission');
		this.$store.dispatch('loadAllGames');
		console.log(this.allGames)
	}
}
</script>
<style lang="scss" scoped>
#home{
	background: #F9F8F0;
}
header{
	height:40px;
	padding: 10px;
	background: red;
	font-size: 20px;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	i{
		margin-right: 20px;
		font-size: 20px;
	}
	i:nth-child(2){
		margin-right: 0;
	}
}
.nav{
	display: flex;
	width: 100%;
	height: 130px;
	justify-content: space-around;
	align-items: center;
	li{
		display: flex;
		flex-direction: column;
		i{
			font-size: 50px;
			margin-bottom: 10px;
		}
		span{
			font-size: 18px;
		}
	}
	
}
.hall{
	width: 100%;
	text-align: center;
	margin-top: 20px;
	li{
		border-left: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
		float: left;
		width: 49%;
		height: 160px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 60%;
			margin-bottom: 10px;
		}
	}
}
</style>